import {PageLoading} from '@ant-design/pro-components';
import {HeatmapLayer, MapboxScene, PointLayer,PolygonLayer, LineLayer} from '@antv/l7-react';
import * as React from 'react';
import { FeatureCollection, Feature, GeoJsonProperties } from 'geojson';
const colors = ['#eff3ff', '#c6dbef', '#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#084594'];

type ProvinceData = {
    name: string;
    x: number;
    y: number;
};
export default class ChinaMap extends React.Component {
    state = {
        data: null,
        provinceNameData: null,
        loading: false,
    };

    public async componentDidMount() {
        const [geoData] = await Promise.all([
            fetch(
                'https://geojson.cn/api/china/china.json',
            ).then((d) => d.json()),
        ]);

        const provinceData =  geoData.features.map(
            (item: { properties: { fullname: any; center: any[]; }; }) => ({
            name: item.properties.fullname,
            x: item.properties.center?.[0] ?? 0,
            y: item.properties.center?.[1] ?? 0,
        }));

        this.setState({
            data: geoData,
            provinceNameData: provinceData,
            loading: true,
        });


    }

    public render() {
        const {data, provinceNameData, loading} = this.state;
        let beijing_x = 116.405285
        let beijing_y = 40.404989
        let shanghai_x = 122.472644
        let shanghai_y = 31.231706
        let qinghai_x = 96.778916
        let qinghai_y = 35.623178
        let guizhou_x = 106.713478
        let guizhou_y = 26.578343
        // @ts-ignore
        return loading === false ? (
            <PageLoading/>
        ) : (
            <MapboxScene
                map={{
                    center: [116.2825, 39.9],
                    pitch: 0,
                    style: 'blank',
                    zoom: 2.8,
                    minZoom: 2.8,
                    maxZoom:2.8,
                }}
                style={{
                    position: 'relative',
                    width: '100%',
                    height: '452px',
                }}
                option={{
                    logoVisible:false,
                }}
            >
                <PolygonLayer
                    key="1"
                    source={{
                        data: data,
                        autoFit: true,
                        parser: {
                            type: 'geojson'
                        }
                    }}
                    color={{
                        values: '#1A90FF',
                    }}
                    shape={{
                        // values: 'line',
                        values: 'fill',
                    }}
                    style={{
                        opacity: 0.5, // 透明度
                        fill: '#e80606',
                        stroke: '#e80606',
                        lineWidth: 2
                    }}
                    options={{
                        opacity: 0.5, // 透明度
                        fill: '#e80606',
                        stroke: '#e80606',
                        lineWidth: 2
                    }}

                />
                <LineLayer
                    key={"11"}
                    source={{
                        data: data,
                        parser: {
                            type: 'geojson'
                        }
                    }}
                    color={{
                        values:'#ffffff',
                    }}
                    size={{
                        values: 0.3,
                    }}
                    options={{
                        style: {
                            stroke: '#58abe7',
                            lineWidth: 0.1
                        }
                    }}
                />
                <PointLayer
                    key={"2"}
                    source={{
                        // data: [
                        //     {name:"北京", x: 116.405285, y: 40.404989},
                        // ],
                        data: provinceNameData,
                        parser: {
                            type: 'json',
                            x: 'x',
                            y: 'y',
                        },
                    }}
                    shape={{
                        field: 'name',
                        values: 'text',
                    }}
                    color={{
                        values:'#010c44',
                    }}
                    size={{
                        values: 8,
                    }}
                    style={{
                        opacity: 1,
                        strokeOpacity: 1,
                        strokeWidth: 0,
                    }}
                />
                <PointLayer
                    key={"2"}
                    source={{
                        data: [
                            {name:"北京", x: 116.405285, y: 40.404989},
                            // {name:"天津", x: 117.190182, y: 39.125596},
                        ],
                        parser: {
                            type: 'json',
                            x: 'x',
                            y: 'y',
                        },
                    }}
                    shape={{
                        values: 'circle',
                    }}
                    size={{
                        values:3,
                    }}
                    color={{
                        values: '#1890ff',
                    }}
                    style={{
                        opacity: 1,
                        stroke: '#fff',
                        strokeWidth: 1,
                    }}
                />
                <LineLayer
                    key={"22"}
                    source={{
                        data: [
                            // 北京到青海
                            {x: beijing_x, y: beijing_y, x1: qinghai_x, y1: qinghai_y},
                            // 北京到贵州
                            {x: beijing_x, y: beijing_y, x1: guizhou_x, y1: guizhou_y},
                            // 北京到上海
                            {x: beijing_x, y: beijing_y, x1: shanghai_x, y1: shanghai_y},

                            // 青海到贵州
                            {x: qinghai_x, y: qinghai_y, x1: guizhou_x, y1: guizhou_y},
                            // 贵州到上海
                            {x: guizhou_x, y: guizhou_y, x1: shanghai_x, y1: shanghai_y},
                            // 青海到上海
                            {x: qinghai_x, y: qinghai_y,  x1: shanghai_x, y1: shanghai_y},
                        ],
                        parser: {
                            type: 'json',
                            x: 'x',
                            y: 'y',
                            x1: 'x1',
                            y1: 'y1',
                        },
                    }}
                    shape={{
                        values: 'arc',
                    }}
                    size={{
                        values:2,
                    }}
                    color={{
                        values: '#1890ff',
                    }}
                    style={{
                        opacity: 1,
                        thetaOffset: 0.3,
                    }}
                    animate={{
                        interval: 1,
                        trailLength: 1,
                        duration: 1,
                    }}
                />
                <LineLayer
                    key={"222"}
                    source={{
                        data: [
                            // 青海到北京
                            {x: qinghai_x, y: qinghai_y, x1: beijing_x, y1: beijing_y},
                            // 贵州到北京
                            {x: guizhou_x, y: guizhou_y, x1: beijing_x, y1: beijing_y},
                            // 贵州到青海
                            {x: guizhou_x, y: guizhou_y, x1: qinghai_x, y1: qinghai_y},
                            // 上海到北京
                            {x: shanghai_x, y: shanghai_y, x1: beijing_x, y1: beijing_y},
                            // 上海到青海
                            {x: shanghai_x, y: shanghai_y, x1: qinghai_x, y1: qinghai_y},
                            // 上海到贵州
                            {x: shanghai_x, y: shanghai_y, x1: guizhou_x, y1: guizhou_y},
                        ],
                        parser: {
                            type: 'json',
                            x: 'x',
                            y: 'y',
                            x1: 'x1',
                            y1: 'y1',
                        },
                    }}
                    shape={{
                        values: 'arc',
                    }}
                    size={{
                        values:2,
                    }}
                    color={{
                        values: '#1890ff',
                    }}
                    style={{
                        opacity: 1,
                        thetaOffset: 0.2,
                    }}
                    animate={{
                        interval: 1,
                        trailLength: 1,
                        duration: 1,
                    }}
                />
            </MapboxScene>
        );
    }
}
